import React, { Component } from 'react'
import IceContainer from '@icedesign/container';
import DataBinder from '@icedesign/data-binder';
import { Loading } from '@icedesign/base';
import { generateTreeChartOption } from '../../../../../../echarts-figures.js'
import PermissionControl from '../../../../../../components/PermissionControl/PermissionControl'
import PropTypes from 'prop-types'

var echarts = require('echarts');

@DataBinder({
  ChartData: {
    url: 'https://goldeye.cfbond.com/cattle/similar_company?',
    type: 'get',
    params: {
      // stockCode: ''
    },
    defaultBindingData: {
      numbers: [],
      lay: 0
    }
  }
})
export default class SimilarCompany extends Component {

  static propTypes = {
    stockCode: PropTypes.string.isRequired,
  };
  
  constructor(props) {
    super(props);
    let id = ( '_' + Math.random()).replace('.','_');
    this.state = {
        chartId : 'SimilarCompany',
        text: '请点击会计科目查看相似公司。<br><br>完整的科目维度包含：<br>利润表科目（2个）：净利润，营业收入；<br>现金流量表科目（3个）：销售商品、提供劳务收到的现金，购买商品、接受劳务支付的现金，投资支付的现金；<br> 资产负债表科目（10个）：应收账款，应付账款，存货，货币资金，应付票据，应付票据，预付账款，预收账款，固定资产，商誉；<br><br>若缺少某一科目维度，表示该公司在该科目维度上没有相似公司，或者没有财报数据。'
    }
  }
  initChart(config) {
    let myChart = echarts.getInstanceByDom(document.getElementById(this.state.chartId));
    if( myChart === undefined){
        myChart = echarts.init(document.getElementById(this.state.chartId));
    }
    myChart.setOption(config);
    window.onresize =()=>{
      myChart.resize();
    }
  }

  GetUrlParam(paraName) {
    　var url = document.location.toString();
    　var arrObj = url.split("?");
    　　　if (arrObj.length > 1) {
    　　　　　var arrPara = arrObj[1].split("&");
    　　　　　var arr;
    　　　　　for (var i = 0; i < arrPara.length; i++) {
    　　　　　　　arr = arrPara[i].split("=");
    　　　　　　　if (arr != null && arr[0] == paraName) {
    　　　　　　　　　return arr[1];
    　　　　　　　}
    　　　　　}
    　　　　　return "";
    　　　}
    　　　else { return ""; }
    }

  componentDidMount() {
    this.props.updateBindingData('ChartData',{
      'params': {
        secu_code: this.GetUrlParam("machineCode"),
        type:'dynamic',
        tab:''
      }
    }, (data) => {
      this.setState({
        status: data.status
      })
      if(data.status !== 'NOT_PRIVILEGED'){
      this.initChart(generateTreeChartOption(    
        '动态相似公司',
        data.data.values,
      ));
      }
    });
  }
  render() {
    const { ChartData } = this.props.bindingData;
    const chart = (
      <div id={this.state.chartId} style={{width: "100%", height: "800px"}}></div>
    );

    return (
      <div>
        <IceContainer>
          <Loading 
            style={{width: "100%"}}
            visible={ChartData.__loading ? true : false}
            shape="fusion-reactor"
          >
          <PermissionControl status={this.state.status} chart={chart}/>  
          </Loading>
        </IceContainer>
        <IceContainer>
          <div style={{fontSize:'18px',fontWeight:'bold',marginLeft:'10px'}}>指标解释</div>
          <div dangerouslySetInnerHTML={{ __html: this.state.text }} className="tab-text" />
        </IceContainer>
      </div>
    )
  }
}
